<template>
  <div class="educationsal">
    <div class="educationsal-header">
      <el-button type="primary" @click="insertEducationsal">增加教育培训信息</el-button>
    </div>
    <div class="educationsal-body">
      <el-table :data="userList" style="width: 100%">
        <el-table-column label="院校机构名称" width="260" prop="college">
        </el-table-column>
         <el-table-column label="专业名称" width="200" prop="major">
        </el-table-column>
        <el-table-column label="开始时间" width="200" prop="start_time">
        </el-table-column>
        <el-table-column label="结束时间" width="200" prop="end_time">
        </el-table-column>
        <el-table-column label="创建时间" width="200" prop="time">
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="info"
            :disabled="token !== scope.row.userId" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" :disabled="token !== scope.row.userId"
            @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="form-el-dialog" title="教育培训经历" :visible.sync="dialogVisible" width="60%">
      <educationsal-form :dialog-visible.sync="dialogVisible" :user-item="userItem">
      </educationsal-form>
    </el-dialog>
    <div>educationsal -> 教育背景</div>
  </div>
</template>

<script>
import moment from 'moment';
import { getToken } from '@/utils/auth';
import educationsalApi from '@/api/educationsal';
import EducationsalForm from './components/EducationsalForm.vue';

export default {
  name: 'jobIntention',
  components: {
    EducationsalForm,
  },
  data() {
    return {
      userList: [],
      dialogVisible: false,
      userItem: null,
      token: null,
    };
  },
  mounted() {
    this.token = parseInt(getToken(), 10);
    // 获取教育培训列表
    this.getList();
  },
  methods: {
    insertEducationsal() {
      this.dialogVisible = true;
    },
    // 获取教育培训列表
    getList() {
      educationsalApi
        .getEduList()
        .then((rec) => {
          if (rec.data) {
            this.userList = rec.data.map((item) => {
              const obj = item;
              obj.start_time = moment(obj.start_time * 1000).format('YYYY-MM-DD');
              obj.end_time = moment(obj.end_time * 1000).format('YYYY-MM-DD');
              obj.time = moment(obj.time * 1000).format('YYYY-MM-DD');
              obj.userId = obj.u_id;
              return obj;
            });
          } else {
            this.userList = [];
          }
        })
        .catch(() => {
          this.userList = [];
        });
    },
    // 编辑
    handleEdit(data) {
      this.userItem = data;
      this.dialogVisible = true;
    },
    // 删除
    handleDelete(i) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          educationsalApi
            .delEdu(i.id)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getList();
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败!',
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.userItem = null;
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.educationsal {
  width: 100%;
  padding: 15px;
  position: relative;
  .educationsal-header {
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
  .educationsal-body {
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
}
</style>
